<template>
  <div class="index-main">
    <div class="space">
      <div class="list-sec">
        <section>
          <div class="flex-h">
            <div class="auto-flex">
              <div class="btn-group">
                <button
                  v-for="(v, idx) in tab.list"
                  :class="['btn btn-' + (curTab === v.com ? 'primary' : 'default')]"
                  @click="$root.updateRouter({ curTab: v.com })"
                >{{ v.name }}</button>
              </div>
            </div>
            <div>
              <button class="btn btn-success"
                v-if="$root.is.local"
                @click="$root.openFile($options.__file)"
              >打开组件</button>
            </div>
          </div>
        </section>
        <section>
          <Component v-if="curTab" :is="curTab"></Component>
        </section>
        <!-- <section>
          {{ curTab }}
        </section> -->
      </div>
    </div>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import tab from './tab.js'

export default {
  name: 'index-main',
  data() {
    return {
      tab
    }
  },
  computed: {
    r() {
      return this.$root.router
    },
    curTab() {
      const curTab = this.r.curTab || this.tab.list[0].com
      console.log(curTab)
      import(/* @vite-ignore */ `./${curTab}.vue`).then((data) => {
        console.log(data.default)
      })
      return curTab
    }
  },
  watch: {},
  methods: {
    async lsData() {
      this.data.list = await vm.post('url', {
        a: 'action'
      })
    },
  },
  async mounted() {
    // await this.lsData()
  }
}
</script>

<style lang="less" scoped>
.index-main {
  height: 100%;
}
</style>